<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js\jquery-3.4.1.min.js"></script>
    <style>
        
        h1{
            font-size: 30px;
        }
        img{
            width: 200px;
            height: 300px;
            margin-top: 200px;
        }
    </style>
</head>
<body>
    <div>
        故人西辞黄鹤楼，烟花三月下扬州
    <div>
        <img src="img/2.jpg" >
</body>

<script>

 $(function()
    {
   // 1.控制字体
    $("div").on("keydown", function()
    {
        $("div").css("font-size","100px");
    })
    $("div").on("keyup", function ()
    {
        $("div").css("font-size","50px");
    })
    $("div").attr("tabindex",0).focus();//让元素可聚焦
    //2.放大与缩小(缩小无论采用什么方法都不能实现双向)
    let num=200
    $("img").on("dblclick",function()
{
//     console.log("双击事件触发了")
//     if(num==200)
//     {
//        num=400
//     }
//     else
//     {
//         num=200
//     }
//    $("img").css("width",num+"px")
//    $("img").css("height",num+100+"px")
//    优化
console.log("双击事件触发了")
   num=(num==200?400:200)
   $("img").css("width",num+"px")
   $("img").css("height",num+100+"px")

}
)}
 )
     

</script>
</html>